<template>
    <div style="height:100%;width:100%;">
        <el-row class="mainContent el-row">
            <el-col :span="24">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="">
                        <el-input v-model="formInline.user" placeholder="用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-select v-model="formInline.region" placeholder="状态">
                            <el-option label="待开通" value="tobe"></el-option>
                            <el-option label="正常" value="normal"></el-option>
                            <el-option label="冻结" value="freeze"></el-option>
                            <el-option label="注销" value="logout"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addUsers">创建</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-table :data="tableData" highlight-current-row v-loading="listLoading">
                <el-table-column label="用户名" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.username }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" width="180">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.creTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="ID" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.id }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.state | state }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">

                        <el-button size="mini" type="text" @click="deleteAdmin(scope.$index, scope.row)">删除</el-button>
                        <el-button size="mini" type="text" @click="switchoverType(scope.$index, scope.row)">切换状态</el-button>
                        <el-button size="mini" type="text" @click="resetPwd(scope.$index, scope.row)">重置密码</el-button>
                        <el-button size="mini" type="text" @click="$router.push({path:'roleAllotDetail',query:{id:scope.row.id,from:'systemList',name:scope.row.username}})">分配角色</el-button>

                    </template>
                </el-table-column>
            </el-table>
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="sysList.pageSize" :total="total" style="float:right;">
            </el-pagination>
        </el-row>

        <el-dialog title="新增管理员" :visible.sync="addUsersVisible" width="40%" :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form :model="addForm" ref="addForm" status-icon label-width="100px" :rules="addFormRules" style="text-align:left">
                <el-form-item label="管理员名称" prop="name">
                    <el-col :span="22">
                        <el-input v-model="addForm.name"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="登录名" prop="username">
                    <el-col :span="22">
                        <el-input v-model="addForm.username" placeholder=""></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-col :span="22">
                        <el-input type="password" v-model="addForm.password" placeholder=""></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="确认密码" prop="rePassword">
                    <el-col :span="22">
                        <el-input type="password" v-model="addForm.rePassword" placeholder=""></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addUsersVisible = false">取 消</el-button>
                <el-button type="primary" @click.native="submitAdd('addForm')" :loading="addLoading">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="重置密码" :visible.sync="dialogFormVisible" width="40%" :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form :model="editForm" ref="editPwdForm" status-icon label-width="100px" :rules="editFormRules" style="text-align:left">
                <el-form-item label="新密码" prop="oldPwd">
                    <el-col :span="22">
                        <el-input type="password" v-model="editForm.oldPwd" placeholder=""></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="确认密码" prop="newPwd">
                    <el-col :span="22">
                        <el-input type="password" v-model="editForm.newPwd" placeholder=""></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click.native="submitResetPwd" :loading="editPwdLoading">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            //列表
            listLoading: false,
            formInline: {
                user: null,
                region: ''
            },
            sysList: {
                keyword: null,
                pageNo: 1,
                pageSize: 10,
            },
            total: 1,
            tableData: [],


            // 新增管理员
            addLoading: false,
            addUsersVisible: false,
            addForm: {
                username: '',
                usercode: '',
                password: '',
                rePassword: ''
            },
            addFormRules: {
                username: [
                    { required: true, message: '请输入管理员名称', trigger: 'blur' }],
                usercode: [
                    { required: true, message: '请输入登录名', trigger: 'blur' }],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }],
                rePassword: [
                    { required: true, message: '请输入密码', trigger: 'blur' }],
            },
            // 编辑
            editPwdLoading: false,
            editFormRules: {},
            editForm: {
                oldPwd: '',
                newPwd: ''
            },

            filte: {},
            filters: {
                begtime: '',
                endtime: '',
                usercode: ''
            },
            //重置密码
            dialogFormVisible: false,


        }
    },
    filters: {
        state(val) {
            switch (val) {
                case 1:
                    return '正常';
                    break
                case 2:
                    return '禁用';
                    break
            }
        }
    },
    created() {
        this.onloadlist()
    },
    methods: {
        onloadlist() {
            this.listLoading = true;
            var obj = {
                data: {
                    keyword: this.formInline.user, 
                    pageNo: this.sysList.pageNo,
                    pageSize: this.sysList.pageSize,
                }
            };
            this.$http('/sys/listAdmin', obj).then(resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.total = resp.data.total;
                    // console.log(resp)
                }
                this.listLoading = false;
            })
        },
        handleCurrentChange(val) {
            this.sysList.pageNo = val;
            this.onloadlist();
        },

        onSubmit() {
            this.sysList.keyword = this.user;
            this.sysList.pageNo = 0;
            this.onloadlist();
        },
        deleteAdmin(index, row) {
            this.$confirm("确认删除该管理员么?", "提示", {})
                .then(() => {
                    this.$http('/sys/deleteAdmin', { data: { adminId : row.id } }).then(resp => {
                        console.log(resp)
                        if (resp.code == 1) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                        } else {
                            this.$message({
                                message: resp.msg,
                                type: 'error'
                            })
                        }
                        this.onloadlist()
                    })
                })
                .catch(() => { });
            // console.log(index, row);
        },
        switchoverType(index, row) {
            var msg = '', toState = 0
            if (row.state == 1) {
                msg = '禁用'
                toState = 11
            } else {
                msg = '正常'
                toState = 12
            }
            this.$confirm("确认切换到" + msg + "状态么?", "提示", {})
                .then(() => {
                    this.$http('/sys/switchAdminState', { data: { adminId: row.id } }).then(resp => {
                        // console.log(resp)
                        if (resp.code == 1) {
                            this.$message({
                                message: '切换状态成功',
                                type: 'success'
                            })
                        } else {
                            this.$message({
                                message: resp.msg,
                                type: 'error'
                            })
                        }
                        this.onloadlist()
                    })
                })
                .catch(() => { });
        },
        // 重置密码
        resetPwd(index, row) {
            this.userId = row.id
            this.dialogFormVisible = true;
        },

        submitResetPwd() {
            if (this.editForm.oldPwd == '') {
                this.$message({
                    message: '不能为空',
                    type: 'error'
                })
                return
            }
            if (this.editForm.oldPwd != this.editForm.newPwd) {
                this.$message({
                    message: '请确认新密码输入一致',
                    type: 'error'
                })
                return
            }
            this.editPwdLoading = true;
            this.$http('/sys/resetAdminPassword', { data: { adminId: this.userId, password: this.editForm.oldPwd } }).then(resp => {
                if (resp.code == 1) {
                    this.$message({
                        message: resp.msg,
                        type: 'success'
                    })
                } else {
                    this.$message({
                        message: resp.msg,
                        type: 'error'
                    })
                }
                this.editPwdLoading = false;
                this.dialogFormVisible = false;
                this.onloadlist()
            });
        },
        //创建管理员
        addUsers() {
            this.addForm = {}
            this.addUsersVisible = true;
        },
        submitAdd(fn) {
            this.$refs[fn].validate((valid) => {
                if (valid) {
                    this.addLoading = true;
                    var obj = {
                        data: this.addForm
                    }
                    if(this.addForm.name==''){
                         this.$message({
                            message: '登录名不能为空',
                            type: 'error'
                        })
                        return
                    }
                    if(this.addForm.username==''){
                         this.$message({
                            message: '管理员名称不能为空',
                            type: 'error'
                        })
                        return
                    }
                    if (this.addForm.password == '') {
                        this.$message({
                            message: '密码不能为空',
                            type: 'error'
                        })
                        return
                    }
                    if (this.editForm.password != this.editForm.rePassword) {
                        this.$message({
                            message: '请确认新密码输入一致',
                            type: 'error'
                        })
                        return
                    }
                    this.editPwdLoading = true;
                    this.$http('sys/addAdmin.do', obj).then(resp => {
                        if (resp.code == 1) {
                            this.$message({
                                message: '新建成功',
                                type: 'success'
                            })
                        } else {
                            this.$message({
                                message: resp.msg,
                                type: 'error'
                            })
                        }
                        this.onloadlist();
                        this.addLoading = false;
                        this.addUsersVisible = false;
                    });

                } else {
                    return false;
                }
            });
        },


    }
}
</script>
<style>
.demo-form-inline {
    text-align: left;
}
</style>
